<template>
  <div
    class="w-full h-screen flex justify-center items-center"
    style="background-image: url(/login.png)"
  >
    <NCard class="w-auto p-20 !bg-[#ffffff44]" hoverable>
      <p class="text-3xl font-bold text-center">商银通后台管理界面</p>
      <p class="text-xl font-bold text-center">登录</p>
      <div class="h-full flex flex-col gap-10 items-center pb-10">
        <NForm
          ref="formRef"
          :model="form"
          :rules="rules"
          label-placement="left"
          :label-width="70"
          require-mark-placement="right-hanging"
          :show-require-mark="false"
        >
          <NFormItem label="用户名" path="account">
            <NInput v-model:value="form.account" placeholder="请输入用户名" />
          </NFormItem>
          <NFormItem label="密码" path="password">
            <NInput v-model:value="form.password" placeholder="请输入密码" />
          </NFormItem>
        </NForm>
        <NButton type="primary" class="w-full" @click="handleSubmit">登录</NButton>
      </div>
    </NCard>
  </div>
</template>

<script setup lang="ts">
import { login } from '@/api/login'
import router from '@/router'
import { NCard, NForm, NFormItem, NInput, NButton, useMessage } from 'naive-ui'
import { ref } from 'vue'
defineOptions({ name: 'LoginView' })
const message = useMessage()
const formRef = ref()
const form = ref({
  account: 'zzy',
  password: '123456',
})
const rules = ref({
  account: [{ required: true, message: '请输入账号', trigger: ['input'] }],
  password: [{ required: true, message: '请输入密码', trigger: ['input'] }],
})

function handleSubmit() {
  formRef.value.validate().then(() => {
    login(form.value).then((res) => {
      if (res.code == 200) {
        message.info('登录成功', {
          closable: true,
          duration: 5000,
        })
        localStorage.setItem('user', res.data.name)
        router.push('/')
      }
    })
  })
}
</script>

<style scoped></style>
